/*
 * Copyright (c) 2007-2020 西安交通信息投资营运有限公司 版权所有
 * 作者:李蕊
 */

import React from 'react';
import {Card, Descriptions, Drawer, Spin} from 'antd';
import styles from '@/utils/utils.less'
import {SysErrorLogModel} from '../data';
import service from '../service';
import {DetailsDialogProps} from "@/global";
import useLoad from "@/hooks/useLoad";
import {isAdminUser} from "@/utils/utils";
import utilStyles from '@/utils/utils.less'


/** 错误日志详情组件 */
const Details: React.FC<DetailsDialogProps> = props => {
  const {params: {id}, visible, hide} = props;
  const {loading, data: model} = useLoad<SysErrorLogModel>({
    isLoad: Boolean(id),
    onLoad: () => service.selectById(id),
  }, [id]);


  return (
    <Drawer
      title="查看历史日志详细信息"
      width="70%"
      visible={visible}
      onClose={hide}
      className={utilStyles.drawerBodyPadding}>
      <Spin spinning={loading} wrapperClassName={styles.h100p}>
        {model && (<Basic model={model}/>)}
      </Spin>
    </Drawer>
  );
};

function Basic(props: { model: SysErrorLogModel }) {
  const {model} = props;
  return (
    <Card bordered={false} className={styles.cardBodyDesc}>
      <Descriptions column={1} bordered={true} size="small" className={styles.detailsDescriptions}>
        {isAdminUser() && (<Descriptions.Item label="主键">{model.id}</Descriptions.Item>)}
        <Descriptions.Item label="请求地址">{model.reqUrl}</Descriptions.Item>
        <Descriptions.Item label="请求方法">{model.reqMethod}</Descriptions.Item>
        <Descriptions.Item label="请求参数">{model.reqParam}</Descriptions.Item>
        <Descriptions.Item label="错误消息">{model.msg}</Descriptions.Item>
        <Descriptions.Item label="错误详细信息" style={{verticalAlign: "top"}}>
          <pre>{model.details}</pre>
        </Descriptions.Item>
        <Descriptions.Item label="应用主键">{model.appId}</Descriptions.Item>
        <Descriptions.Item label="应用名称">{model.appName}</Descriptions.Item>
        <Descriptions.Item label="IP地址">{model.ip}</Descriptions.Item>
        <Descriptions.Item label="操作人主键">{model.operateUserId}</Descriptions.Item>
        <Descriptions.Item label="操作人姓名">{model.operateUserName}</Descriptions.Item>
        <Descriptions.Item label="操作时间">{model.operateDateTime}</Descriptions.Item>
      </Descriptions>
    </Card>
  );
}

export default React.memo(Details);

